<template>
  <div id="contentRight">
    <section id="sec1">
      <p class="guide">
        <span>账户&安全</span>
      </p>
      <div class="d2">
        <div class="header" @click="$refs.uploadHdRef.dialogShow()">
<!--          <upload-img curId="headInputId" curRef="headInputId" @inputChange="fileChange"/>-->
          <img :src="avatar" alt="" v-if="avatar">
        </div>
        <div class="d2">
          <p class="p1">
            <span>{{data.nickname}}</span>
            <img src="../common/imgs/pen.png" alt="" class="write" @click="$refs.changeNkname.dialogShow()">
          </p>
          <p class="p2">
            <span>上次登录</span>
            <span>{{data.last_login_time}}</span>
          </p>
        </div>
      </div>
      <div class="d3">
        <div class="left">
          <p class="p1">实名认证</p>
          <p class="p2">建议您完成实名认证，以确保财产安全</p>
          <p class="p3">
            <router-link to="/relNameVerification" v-if="relNamePass == 2">去认证 >></router-link>
            <router-link class="verificationResult" to="/verificationResult" v-if="relNamePass == 1">
              <img src="../common/imgs/isRelName.png" alt="">
              <span>已认证</span>
            </router-link>
            <router-link class="verificationResult red"  to="/verificationResult" v-if="relNamePass == 0">
              <span>未通过 >> </span>
            </router-link>
            <router-link class="verificationResult grey"  to="/verificationResult" v-if="relNamePass == -1">
              <span>审核中 >> </span>
            </router-link>
          </p>
        </div>
        <div class="right">
          <img src="../common/imgs/safeCenterIcon.png" alt="">
        </div>
      </div>
    </section>
    <section id="sec2">
      <div class="d1">
        <div class="left">
          <span class="s1">
            <img src="../common/imgs/bindMb.png" alt="" class="leftIMG">
          </span>
          <div class="d2">
            <p>绑定手机</p>
            <p>绑定手机后，您可以享受手机登录，动态码登录，找回密码等。为了账号安全，建议您在更换手机后第一时间更换绑定手机</p>
          </div>
        </div>
        <div class="right">
          <span>{{data.telphone}}</span>
        </div>
      </div>
      <div class="d2">
        <div class="left">
          <span class="s1">
            <img src="../common/imgs/closeBHpay.png" alt="" class="leftIMG">
          </span>
          <div class="d2">
            <p>关联BHPay帐户</p>
            <p>国际领先的区块链链数字资产钱包，支持主流货币的场外交易和兑换</p>
          </div>
        </div>
        <div class="right">
          <span class="yellow" v-if="!(data.openBhpay)" style="color: #262626">请在APP上关联</span>
          <router-link to="/bhpayInfo" class="notOpenBhpay" v-if="data.openBhpay">
            <p>已关联BHpay</p>
            <p>{{data.is_bhpay.card_num_cut}}</p>
          </router-link>
        </div>
      </div>
      <div class="d3">
        <div class="left">
          <span class="s1">
            <img src="../common/imgs/loginpws.png" alt="" class="leftIMG">
          </span>
          <div class="d2">
            <p>登录密码</p>
            <p>安全性高的密码可以使账号更安全。建议您定期更换密码，并且设置一个包含数字和字母，并且长度超过6位以上的密码</p>
          </div>
        </div>
        <div class="right">
          <router-link to="/forgetLoginPws" class="yellow">修改</router-link>
        </div>
      </div>
      <div class="d4">
        <div class="left">
          <span class="s1">
            <img src="../common/imgs/transpws.png" alt="" class="leftIMG">
          </span>
          <div class="d2">
            <p>交易密码</p>
            <p>保障资产安全</p>
          </div>
        </div>
        <div class="right">
          <a href="javascript:void 0;" @click="$refs.editTransPws.dialogShow()" class="yellow" v-if="data.is_trade_pwd == 1 && relNamePass == 1">修改</a>
          <a href="javascript:void 0;" class="red" v-if="data.is_trade_pwd == 1 && relNamePass == 1" @click="findTransferPws">找回</a>
          <a href="javascript:void 0;" @click="setTransferPws" class="yellow" v-if="data.is_trade_pwd == 0 && relNamePass == 1">设置交易密码</a>
        </div>
      </div>
    </section>
    <upload-avatar @confirm="uploadRes" ref="uploadHdRef"/>
    <set-trans-pws ref="setTransPws" @confirm="setRransPwsSuccess"/>
    <edit-trans-pws ref="editTransPws"/>
    <change-nickname ref="changeNkname" @confirm="changeNknameSuccess"/>
    <confirm-dialog ref="findPws" msg="找回密码请打开人人矿场APP操作"/>
  </div>
</template>
<script>
  import {  userInfo , isRelNameVerify } from '../http/api';
  export default {
    name :'safeCenter',
    data() {
      return{
        data : {},//用户信息
        avatar : null,//头像
        relNamePass : null,//实名认证:0 未通过， 1 已认证， -1 审核中  2未实名审核
      }
    },
    components:{
      ConfirmDialog : resolve => { require(['../components/ConfirmDialog'], resolve) }, /*公共提示框*/
      UploadAvatar : resolve => { require(['../components/uploadAvatar'], resolve) }, /*上传头像*/
      SetTransPws : resolve => { require(['../components/SetTransPws'], resolve) }, /*设置交易密码*/
      EditTransPws : resolve => { require(['../components/EditTransPws'], resolve) }, /*设置交易密码*/
      ChangeNickname : resolve => { require(['../components/changeNickname'], resolve) }, /*修改昵称*/
    },
    mounted() {
      // this.loadPage();
      let thiz = this;
      let https = [
        this.getRelnameStatus(),
        this.loadPage(),
      ];
      this.PromiseAll(https);
    },
    methods:{
      setTransferPws(){
        if(this.relNamePass != 1){
          require('../common/js/toast').toast('实名认证后可设置交易密码');
          return;
        }
        this.$refs.setTransPws.dialogShow()
      },
      findTransferPws(){
        this.$refs.findPws.dialogShow();
      },
      getRelnameStatus(){
        let thiz = this;
        return isRelNameVerify({noToast : true , noLoading: true}).then( res => {
          let code = Number( res.code );
          let data = res.data;
          switch(code){
            case 609:
              thiz.relNamePass = 2 ; break;
            case 602:
              thiz.relNamePass = -1 ; break;
            case 614:
              thiz.relNamePass = 0 ; break;
            case 200:
              thiz.relNamePass = Number(data.status);
              break;
          }
        })
      },
      loadPage(){
        return userInfo({ noLoading : true , noToast: true}).then(res => {
          if(res.code == 200){
            let data = res.data;
            let is_bhpay = data.is_bhpay;
            let openBhpay = is_bhpay && JSON.stringify(is_bhpay) != '{}' ? true : false;
            data.openBhpay = openBhpay;
            if(openBhpay){
              let card_num = is_bhpay.card_num;
              let left = card_num.substring(0,4);
              let right = card_num.substring(card_num.length - 4);
              is_bhpay.card_num_cut = left + ' **** **** ' + right;
              data.is_bhpay = is_bhpay;
            }
            this.data = data;
            this.avatar = data.avatar || require('../common/imgs/defaultHeader.png');
          }
        });
      },
      uploadRes(res){
        this.avatar = res.img;
      },
      setRransPwsSuccess(){
        this.data.is_trade_pwd = 1;
      },
      changeNknameSuccess(res){
        this.data.nickname = res.name;
      },
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #sec1{
    padding-bottom: 24px;
    >.guide{
      >span{
        font-size: 24px;
      }
    }
    >.d2{
      overflow: hidden;padding-top: 38px;
      >.header{
        width: 70px;height: 70px;float: left;position: relative;overflow: hidden;display: inline-block;border-radius: 50%;
        &:hover{
          cursor: pointer;
        }
        >img{
          width: 100%;min-height: 100%;
        }
      }
      >.d2{
        padding-left: 17px;float: left;
        >.p1{
          padding-top: 13px;
          >span{
            font-size: 16px;color: #262626;vertical-align: middle;
          }
          >img{
            vertical-align: middle;width: 16px;margin-left: 6px;
            &:hover{
              cursor: pointer;
            }
          }
        }
        >.p2{
          padding-top: 18px;font-size: 14px;color: #999;
        }
      }
    }
    >.d3{
      .borderRadius;.boxShadow(15px , #f3efef);height: 135px;margin-top: 29px;overflow: hidden;padding: 27px 30px;
      >.left{
        float: left;
        >.p1{
          font-size: 16px;
        }
        >.p2{
          font-size: 14px;color: #999;padding-top: 10px;
        }
        >.p3{
          padding-top: 19px;text-align: left;
          >a{
            display: inline-block;height: 24px;line-height: 24px;padding: 0 13px;.bgYellow;color: #fff;.borderRadius(2px);font-size: 14px;
          }
          >.verificationResult{
            display: inline-block;background: none;padding-left: 0;
            >img{
              height: 21px;width: 21px;vertical-align: middle;
            }
            >span{
              font-size: 14px;.colorYellow;vertical-align: middle;
            }
          }
          >.red{
            >span{
              color: #ef5656;
            }
          }
          >.grey{
            >span{
              color: rgba(38, 38, 38, 0.64);
            }
          }
        }
      }
      >.right{
        float: right;
        >img{
          height: 104px;
        }
      }
    }
  }
  #sec2{
    padding: 0 30px;margin-top: 10px;padding-bottom: 82px;padding-top: 30px;
    >div{
      overflow: hidden;border-bottom: 1px solid#F7F7F7;height: 77px;
      >.left{
        >.s1{
          display: inline-block;height: 100%;float: left;
          >.leftImg{
            width: 26px;margin-top: 22px;
          }
        }
        >.d2{
          padding-left: 12px;float: left;padding-top: 20px;
          >p:first-child{
            font-size: 16px;color: #262626;
          }
          >p:last-child{
            font-size: 12px;color: #999;padding-top: 9px;
          }
        }
      }
      >.right{
        float: right;
        >.yellow{
          line-height: 77px;height: 77px;display: inline-block;.colorYellow;font-size: 14px;
        }
        >.notOpenBhpay{
          .colorYellow;text-align: center;
          >p:first-child{
            padding-top: 20px;
          }
          >p:last-child{
            padding-top: 10px;
          }
        }
      }
    }
    >.d1{
      >.right{
        >span{
          line-height: 77px;height: 77px;display: inline-block;font-size: 14px;
        }
      }
    }
    >.d4{
      >.right{
        >.red{
          color: #EF5656; line-height: 77px;height: 77px;display: inline-block;font-size: 14px;margin-left: 13px;
        }
      }
    }
  }
</style>
